<template>
	<view>
		<!-- 主图和基本信息 -->
		<course-header :course="course"></course-header>
		
		<view class="course-details" :style="'height:' +pageHeight+ 'px'">
			<tabBar :tabs="tabs" v-model="tabIndex"></tabBar>
			<swiper class="swiper-box" duration="300" :current="tabIndex" circular @change="changeTab">
				<swiper-item v-for="(item,index) in tabs" :key="index">
					<scroll-view class="scroll-box" :scroll-y="enableScroll" @scrolltoupper="scrolltoupper" :upper-threshold="0">
						<view class="details-info">
							<courseInfo v-if="index === 0" :detailUrls="course.detailUrls"></courseInfo>
							<!-- 除了小程序平台,其他均存在 -->
							<!-- #ifndef MP -->
							<courseDir v-if="index === 1" :chapterList="chapterList" :isBuy="isBuy" @playVideo="playVideo"></courseDir>
							<!-- #endif -->
							<!-- 解决小程序回显问题 -->
							<!-- #ifdef MP -->
							<courseDir v-if="index === 1" :chapterList="chapterList" :isBuy="isBuy" @playVideo="playVideo" :activeObject="activeObject"></courseDir>
							<!-- #endif -->
							<courseComment v-if="index === 2" :commentList="commentList"></courseComment>
							<courseGroup v-if="index === 3" :groupList="groupList"></courseGroup>
						</view>
					</scroll-view>	
				</swiper-item>
			</swiper>
		</view>
		<!-- 底部按钮 -->
		<bottom-btn :btnText="isBuy || course.isFree ? '立即观看':'立即购买'" @clickBottom="clickBottom"></bottom-btn>
		<!-- 分享组件 -->
		<!-- #ifdef APP-PLUS -->
		<my-share ref="share" :shareData="course"></my-share>
		<!-- #endif -->
		
		<!-- 试看窗口 -->
		<view v-if="videoUrl" class="video-box mask" @click="closePlay" @touchmove.stop.prevent="()=>{}">
			<view class="name">
				<text>免费试看</text>
				<text class="iconfont icon-close"></text>
			</view>
			<!-- h5播放端有问题 -->
			<video id="playVideo" :src="videoUrl" class="video"></video>
		</view>
	</view>
</template> 

<script>
	import courseHeader from './components/course-header.vue'
	import tabBar from '@/components/common/tab-bar.vue'
	import tabs from '@/config/course-detail-tabs.js'
	import courseInfo from './components/course-info.vue'
	import courseComment from './components/course-comment.vue'
	import courseDir from './components/course-dir.vue'
	import courseGroup from './components/course-group.vue'
	import bottomBtn from './components/bottom-btn.vue'
	import api from '@/api/course.js'
	export default {
		
		components: { courseHeader,tabBar,courseInfo,courseComment,courseDir,courseGroup,bottomBtn},
		
		onLoad(option) {
			// console.log(option.id);
			this.getPageHeight()
			
			//禁用点击状态栏回到顶部
			// #ifdef APP-PLUS
			this.noStatusScrollTop()
			// #endif
			
			//获取课程id，查询课程数据
			this.id = option.id
			this.loadData()
			
		},
		// 第1次页面渲染完后触发
		onReady() {
			// 获取详情区域距离顶部高度
			let view = uni.createSelectorQuery().in(this).select(".course-details");
			view.fields({
			  rect: true
			}, data => {
			  // console.log("节点的顶部高度为" + data.top);
			  this.detailTop = data.top
			}).exec();
			
			
			//获取当前播放实例
			this.videoContext = uni.createVideoContext('playVideo',this)
		},
		//监听页面滚动到底部
		onReachBottom(){
			//页面到达底部，开启详情区域滚动
			this.enableScroll = true
		},
		// 监听页面滚动
		onPageScroll(e) {
			
			if(this.detailTop - this.statusNavHeight <= e.scrollTop){
				// 页面到达底部则将详情区域滚动条开启
				this.enableScroll = true
				return
			}
			console.log('监听页面滚动',e)
			//当前滚动条距离顶部距离 小于 详情区域到达顶部高度
			if(this.enableScroll && e.scrollTop < this.detailTop){
				//禁用详情滚动
				this.enableScroll = false
			}
		},
		// 监听app端右上角分享按钮
		// #ifdef APP-PLUS
		onNavigationBarButtonTap(e) {
			
			console.log('e', e)
			
			
			if(e.type === 'share') {
				// 自定义分享组件
				//app端分享
				// uni.downloadFile({
				// 	url:this.course.mainImage,
				// 	// console.log('下载完成',res.tempFilePath)
				// 	success:(res) =>{
				// 		uni.shareWithSystem({
				// 			summary:this.course.list,
				// 			href:'https://www.mengxuegu.com',
				// 			type:'image',
				// 			imageUrl:res.tempFilePath,
				// 			success() {
				// 				uni.showToast({
				// 					title:'分享成功'
				// 				})
				// 			}
				// 		})
				// 	}
				// })
				this.$refs.share.showHandler()
			}
		},
		// #endif
		
		//小程序端分享(onLoad)
		onShareAppMessage() {
			if(res.from === 'button'){
				consol.log(res.target)
			}
			return{
				title:this.course.title,
				path:this.$util.routePath()
			}
		},
		
		
		data() {
			return {
				tabs, // tabs:tabs 标签选项卡数据
				tabIndex: 0, //当前所在选项下标
				pageHeight: 3000, // 手机的视口高度
				statusNavHeight: 0, // 状态栏+导航栏高度
				enableScroll: false, //详情区域是否允许纵向滚动，false不允许
				detailTop: 0, //详情区域距离顶部距离
				id:null ,//接收点击页的课程id
				course:{},//课程基本信息
				chapterList:[],//章节信息
				commentList:[],//评论信息
				groupList:[],//套餐信息
				isBuy:false,
				videoUrl:null ,//播放视频地址
				videoContext:null ,//播放器实列
				activeObject:{},//解决小程序章节高亮问题,通过子组件传给父组件
			}
		},
		methods: {
			//左右切换
			changeTab(e){
				this.tabIndex = e.detail.current
				//页面回到底部
				uni.pageScrollTo({
					scrollTop:this.detailTop,
					duration:300
				})
			},
			// 获取当前页面视口高度
			getPageHeight(){
				const res = uni.getSystemInfoSync()
				//获取平台
				const system = res.platform
				//状态栏高度
				const statusBarHeight = res.statusBarHeight
				if(system === 'android') {
					// 状态导航高度
					this.statusNavHeight = statusBarHeight + 48
				}else if(system === 'ios'){
					this.statusNavHeight = statusBarHeight + 44
				}
				console.log(res.screenHeight,res.windowHeight);
				this.pageHeight = res.screenHeight - this.statusNavHeight
			},
			
			scrolltoupper(){
				//1.让页面滚动条回到顶部
				uni.pageScrollTo({
					scrollTop:0,
					duration:300
				})
				//2.禁用详情scrollView滚动
				this.enableScroll = false
			},
			// 禁用点击状态栏回到顶部
			noStatusScrollTop() {
				// 获取当前页面实例
				const webView = this.$scope.$getAppWebview()
				webView.setStyle({'scrollsToTop': false})
			},
			
			//初始化课程数据
			loadData(){
				//1. 查询课程基本信息
				this.getCourseById()
				//2.查询章节列表
				this.getChapterById()
				//3.查询评论列表
				this.getComment()
				//4.查询组合套餐列表
				this.getGroup()
			},
			
			async getCourseIsBuy(){
				//如果已登录，则判断是否已购买
				const isLogin = this.$util.isLogin({nav:false}) //未登录不用跳转到登录页
				if(isLogin){
					//如果已登录，则判端是否已购买
					const {data} = await api.getBuyCourse(this.id)
					this.isBuy = data.isBuy
				}
			},
			
			//1. 查询课程基本信息
			async getCourseById(){
				const {data} = await api.getCourseById(this.id)
				this.course = data
				//将当前课程标题动态传递给导航栏
				uni.setNavigationBarTitle({
					title: data.title
				});
			},
			
			//2.查询章节列表
			async getChapterById(){
				const {data} = await api.getChapterSectionList(this.id)
				console.log('查询章节基本信息',data);
				this.chapterList = data
			},
			
			//3.查询评论列表
			async getComment(){
				const {data} = await api.getCourseCommentList(this.id)
				console.log('查询评论基本信息',data);
				this.commentList = data
			},
			
			//3.查询评论列表
			async getGroup(){
				const {data} = await api.getCourseGroupList(this.id)
				console.log('查询套餐组合基本信息',data);
				this.groupList = data
			},
			
			//底部按钮触发
			clickBottom(){
				if(this.isBuy || this.course.isFree){
					console.log("跳转");
					//已购买过或免费，跳转到视频播放页
					this.navTo(`/pages/course/couser-play?id=${this.id}`,{login:true})
				}else{
					//未购买过，跳转到确认购买页面
					this.navTo(`/pages/order/confirm-buy?course=` + encodeURIComponent(JSON.stringify(this.course)),{login:true})
				}
			},
			
			//关闭视频弹窗按钮
			closePlay(){
				this.videoContext.stop()
				this.videoUrl = null
			},
			
			//试看视频
			playVideo(obj){
				console.log(obj.section.videoUrl)
				
				if(this.isBuy){
					//已经购买,则直接跳转到视频播放列表页面
					this.navTo(`/pages/course/couser-play?id=${this.id}`,{login:true})
					return
				}
				//解决小程序高亮问题
				//通过子组件触发事件携带参数过来给父组件接收
				this.activeObject = obj.activeObject
				//弹出播放窗口
				this.videoUrl = obj.section.videoUrl
				//不能立即播放,先渲染页面,在播放
				this.$nextTick(() => {
					//播放
					this.videoContext.play()
				})
			}
		}
	}
</script>

<style lang="scss">
.course-details{
	overflow: hidden;
	.swiper-box ,.scroll-box{
		height: 100%;
	}
	.details-info{
		//被隐藏的80rpx（标签选项卡高度）
		padding-bottom: 180rpx;
	}
}

.video-box{
	z-index: 100;
	text-align: center;
	.name{
		color: #fff;
		position: relative;
		top: 360rpx;
		/* #ifdef MP*/
		top: 300rpx;
		/* #endif */
		font-size: 38rpx;
		font-weight: bold;
	}
	.icon-close{
		margin-left: 20rpx;
	}
	.video{
		width: 750rpx;
		height: 420rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}
</style>
